// 封装图表bar组件
import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
function Bar({ title, xData, yData, style }) {
    const domRef = useRef()

    const chartInit = () => {
        echarts.dispose(domRef.current) //解决echart警告提示重复渲染的问题
        const myChart = echarts.init(domRef.current);

        // 绘制图表
        myChart.setOption({
            title: {
                text: title,
            },
            tooltip: {},
            xAxis: {
                data: xData,
            },
            // 设置上下左右边距
            grid: {
                top: "15%",
                left: "3%",
                right: "3%",
                bottom: "3%",
                containLabel: true,
            },
            barWidth: 20, //设定柱子宽度
            color: "rgba(98, 54, 255, 1)",//设定柱子颜色
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: yData
                }
            ]
        })
    }

    // 找个合适的时机 把这个初始化函数执行下
    useEffect(() => {

        window.onresize = function () {
            chartInit()
        }
        chartInit()
        return () => {

        }
    }, [yData, xData])
    return (
        <>

            {/* 准备一个挂载图表的节点 */}
            <div ref={domRef} style={style}></div>

        </>
    )
}
export default Bar